import React from 'react'
import request from '../../utils/request'
import { Toast } from 'antd-mobile'
import NavHeader from '../../components/NavHeader'
import  style from './index.module.css'
import getCurrentCity from '../../utils/currentCity'
import axios from 'axios'
import { Link } from 'react-router-dom'
import HouseItem from '../../components/HouseItem'

export default class Map extends React.Component {
  state = {
    houseList: [],
    isShowList: false
  }
  // 页面第一次render 之后触发的回调函数
    componentDidMount () {
    this.BMap = window.BMap
    this.map = new this.BMap.Map("container")
    this.myGeo = new this.BMap.Geocoder()
      this.mapInit()
    // var point = new window.BMap.Point(116.404, 39.915) // 设置默认坐标
    // map.centerAndZoom(point, 15)
    // movestart 开始移动就触发，隐藏我们的下方弹窗
    this.map.addEventListener('movestart', _ => {
      if (this.state.isShowList) { // 提高性能
        this.setState(_ => {
          return {
            isShowList: false
          }
        })
      }
    })
  }
  async mapInit () { // 初始化地图 
    // 添加控件
    this.map.addControl(new this.BMap.NavigationControl())
    this.map.addControl(new this.BMap.ScaleControl())
    // 获取当前定位，显示当前默认定位为中心点
    const { label, value } = await getCurrentCity() // await 会将异步代码转换为 yilde，等待塔执行完了才会开始下一个任务
    this.myGeo.getPoint(label, point => { 
      if (point) this.map.centerAndZoom(point, 11) // 默认11级别   
      this.renderOverlays(value)
    }, label)
    
  }
  async renderOverlays (id) { // 渲染地图覆盖物，入口，id 为城市区县的标识码
    Toast.loading('正在加载', 0)
    const { data: res } = await axios.get(`http://api-haoke-dev.itheima.net/area/map?id=${id}`)
    const body = res.body
    // 判断当前是区县还是小区
    const { nextZoom, type } = this.getTypeAndZoom()
    // 遍历数据生成覆盖物
    body.forEach( item => this.createOverlays(nextZoom, type, item) )
  }
  getTypeAndZoom () { // 获取当前的地图显示级别，从而得出接下来要渲染什么级别和什么形状的渲染物
    // 获取当前地图缩放级别
    let zoom = this.map.getZoom()
    let nextZoom, type
    // type = circle 原型 rect椭圆
    if (zoom < 13) {
      nextZoom = 13
      type = "circle"
    } else if (zoom < 15) {
      nextZoom = 15
      type = "circle"
    } else {
      type = "rect"
    }
    return {
      nextZoom,
      type
    }
  }
  createOverlays (nextZoom, type, item) { // 创建覆盖物中转，生成公共代码]
    const { coord: {latitude, longitude }, label: quName, value, count} = item
    var point = new this.BMap.Point(longitude, latitude)
    // 地理位置信息
    var opts = { 
                position: point, // 指定文本标注所在的地理位置
                // offset: new BMap.Size(-30, -30) // 设置文本偏移量
              }
    // 拿着地理位置信息生成覆盖物对象
    const gai = new this.BMap.Label('', opts)
    // const labelStyle = {} // 文本样式
    // gai.setStyle(labelStyle)
    // 覆盖物对象上挂载唯一表示
    gai.id = value
    if (type === 'circle') { // 区县
      this.createCircle(nextZoom, gai, quName, count)
    } else { // 小区
      this.createRect(gai, quName, count)
    }
    Toast.hide()
  }
  createCircle (nextZoom, gai, quName, count) { // 创建圆形
    gai.setContent(`<div class="${style.bubble}">
                            <p class="${style.name}">${quName}</p>
                            <p>${count}套</p>
                          </div>`)
    var that = this
    gai.addEventListener('click',function() {
    // 改变展示的中心坐标和地图的放大级别
    // 做到了点击放大的效果
    that.map.centerAndZoom(this.K.position, nextZoom)
      // 清除现在的覆盖物
      setTimeout( _ => {that.map.clearOverlays()}, 0)
      that.renderOverlays(this.id)
      })
      this.map.addOverlay(gai)
  }
  createRect (gai, quName, count) { // 创建矩形
    const labelStyle = {
      border: 'none'
    } // 文本样式
    gai.setStyle(labelStyle)
    gai.setContent(`<div class="${style.rect}">
                      <span class="${style.housename}">${quName}</span>
                      <span class="${style.housenum}">${count}套</span>
                      <i class="${style.arrow}"></i>
                  </div>`)
    var that = this
    gai.addEventListener('click',function(e) {
    // 改变展示的中心坐标和地图的放大级别，做到了点击放大的效果
    // that.map.centerAndZoom(this.K.position, 16)
    // 获取小区房屋资源
    that.getHouseList(this.id)
    that.map.panBy((window.innerWidth / 2) - e.changedTouches[0].clientX, ((window.innerHeight - 330 ) / 2 ) - e.changedTouches[0].clientY)
      })
      // 注册label到页面中
      this.map.addOverlay(gai)
  }
  async getHouseList (id) { // 获取小区中的具体房源
    const { data: res } = await axios.get(`http://api-haoke-dev.itheima.net/houses?cityId=${id}`)
    this.setState(_ => {
      return {
        houseList: res.body.list,
        isShowList: true
      }
    })
  }
  renderHousesList () { // 渲染房屋结构
    return (this.state.houseList.map(item => {
      return (
        <HouseItem  
          // key={key}
          // style={style}
          src={item.houseImg}
          title={item.title}
          desc={item.desc}
          tags={item.tags}
          price={item.price}
        />
      )
    }))
  }
  render () {
    return (
      <div className={style.map}>
        <div className={style.navv}>
          <NavHeader >地图找房</NavHeader>
        </div>
        <div id='container' className={style.container}></div>
        {/* 房屋信息下方展示 */}
        <div className={[ style.houseList, this.state.isShowList ? style.show : '' ].join(' ')} >
          <div className={style.titleWrap}>
                  <h1 className={style.listTitle}>房屋列表</h1>
                  <Link className={style.titleMore} to="/home/list">更多房源</Link>
          </div>
              <div className={style.houseItems}>
                  {/* 房屋结构 */}
                  {this.renderHousesList()}
              </div>
          </div>
      </div>
    )
  }
}